
var globalPic;
// width to resize large images to
var maxWidth=200;
// height to resize large images to
var maxHeight=200;
// valid file types
var fileTypes=["bmp","gif","png","jpg","jpeg"];
// the id of the preview image tag
var outImage="previewField";
// what to display when the image is not valid
var defaultPic="img/default_user.jpg";

var fileField="image";


function preview(what){
    var source=what.value;
    var ext=source.substring(source.lastIndexOf(".")+1,source.length).toLowerCase();

    var i=0;

    for (i=0; i<fileTypes.length; i++){
        if (fileTypes[i]==ext){
            break;
        }
    }
    globalPic=new Image();
    if (i<fileTypes.length){

        try{
            globalPic.src=what.files[0].getAsDataURL();
            
        }catch(err){
            globalPic.src=source;
            
        }
    }else {
        globalPic.src=defaultPic;
        alert("Invalid extension. Please select one of these:"+fileTypes.join(", "));
    }
    
    setTimeout("applyChanges()",200);
}


function applyChanges(){
    var field=document.getElementById(outImage);
    var x=parseInt(globalPic.width);
    var y=parseInt(globalPic.height);
    if (x>maxWidth) {
        y*=maxWidth/x;
        x=maxWidth;
    }
    if (y>maxHeight) {
        x*=maxHeight/y;
        y=maxHeight;
    }
    field.style.display=(x<1 || y<1)?"none":"";
    field.src=globalPic.src;
    field.width=x;
    field.height=y;
}
